<template>
  <div>
    <div id="top">
      <div class="header w">
        <div class="logo">
          <img src="../assets/image/logo.png" alt="logo" />
        </div>
        <div class="topNav">
          <span class="projectName">校园卡照片管理</span>
        </div>
        <div class="navBar">
          <!-- <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            router
          >
           
              <el-menu-item index="index" route="/index"
                >白名单上传</el-menu-item
              >
              <el-menu-item index="examManage" route="/examManage"
                >审核管理</el-menu-item
              > 
          </el-menu> -->
        </div>
        <div class="userState">
          <img src="../assets/image/man.png" alt="头像" />
          <span class="nowTime">
            {{ nowTime }}
            <i class="dot"></i>
          </span>
          <span class="userName">admin</span>
          <span class="logout">
            <i class="logLine"></i>
            <span class="logging" @click="logout">退出</span>
          </span>
         
        </div>
      </div>
    </div>
    <div id="content" class="w" style="padding: 0 2vw">
     
      <div class="right">
        <router-view />
      </div>
    </div>
   
    <!-- 引入返回顶部组件 -->
    <v-goTop></v-goTop>
  </div>
</template>
<script>
//导入api
import goTop from "@/components/goTop.vue"; //引入返回顶部组件
// import { getUserInfo } from "@/api/apis";
export default {
  name: "layout",
  data() {
    return {
      userInfo: {},
     
      seeResult: true, // 判断是否是可见结果
      nowTime: "", //问候语
      activeIndex: "index", //导航
    
    };
  },
  components: {
    "v-goTop": goTop,
  },
  created() {
    // this.login()
    this.newTime();
    this.activeIndex = this.$route.name; // 导航高亮
  },

  methods: {
  
    getItme(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
    },

    logout() {
      this.$router.replace({ path: "/login" });
    },

    // -----问候语时间判断------
    newTime() {
      this.nowTime = new Date().getHours();
      if (this.nowTime < 8) {
        this.nowTime = "早上好！";
      } else if (this.nowTime < 12) {
        this.nowTime = "上午好！";
      } else if (this.nowTime < 18) {
        this.nowTime = "下午好！";
      } else if (this.nowTime < 24) {
        this.nowTime = "晚上好！";
      } else {
        this.nowTime = "您好！";
      }
    },
  },
};
</script>
<style lang="less" scoped>

.topNav {
  margin-left: 0px;
  .navBox {
    float: left;
    margin-left: 40px;
    margin-top: 26px;
  }
}

//导航栏自定义样式
/deep/ .el-menu--horizontal > .el-menu-item {
  float: left;
  height: 61px;
  line-height: 88px;
  margin: 0 ;
  // border-bottom: 2px solid transparent;
  // color: #666;
  font-size: 16px;
  font-weight: 600;
  padding: 0 5px;
  margin: 0 20px;
}
.navBar {
  float: left;
  width: 560px;
  margin-left: 90px;
}
.right {
  width: 100%;
  height: 95%;
  margin: 0 auto;
  // padding: 20px;
  // border: 1px solid #efefef;

}
.left {
  width: 180px;
  padding-left: 20px;
  position: fixed;
  height: calc(100vh - 120px);
  overflow: hidden;
  // background-color: #ccc;
  margin-left: 20px;
}

</style>